<!DOCTYPE html>
<html lang="zh-CN">
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-COMPATIBLE"  content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <title>首页</title>
    <link rel="stylesheet" href="font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/indexStyle.css"/>
    <!--[if lt ie9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!--导航-->
<div class="container">
    <nav class=" navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <div class="navbar-brand">
                <img src="images/logo.png" class="center-block " alt="logo"/>
            </div>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mycollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <!-- 导航内容-->
        <div class="collapse navbar-collapse text-center" id="mycollapse">
            <ul class="nav navbar-nav">
                <li><a href="">首页</a></li>
                <li><a href="#information">基本资料</a></li>
                <li><a href="#project">项目经验</a></li>
                <li><a href="#skill">专业技能</a></li>
                <li><a href="#zwpj">人生经历</a></li>
            </ul>
        </div>
    </nav>
</div>

<!--header 头部-->
<header class="intro">
    <div class="intro-body">
        <div class="container mydiv">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 col-lg-8 col-xs-8 col-lg-offset-2 col-xs-offset-2">
                    <h1>简历<span class="brand-heading">web前端工程师</span></h1>
                    <p class="intro-text">喜欢技术，热爱挑战</p>
                    <!--<a href="#services" class="btn-circle center-block">-->
                        <!--<span class="glyphicon  glyphicon-menu-down " aria-hidden="true" ></span>-->
                    <!--</a>-->
                </div>
            </div>
        </div>
    </div>
</header>
<!--个人信息-->
<div class="text-center server">
    <a name="information"></a>
    <div class="container mydiv">
      <h2>基本资料</h2>
        <div class="row">
            <div class="col-lg-3 col-xs-6 col-md-3 ">
                <i class="fa fa-laptop"></i>
                <h4><strong>个人信息</strong></h4>
                <p>英文名：Alice  性别：女<br>年龄：22岁  籍贯：成都</p>
            </div>
            <div class="col-lg-3 col-xs-6 col-md-3">
                <i class="fa fa-code"></i>
                <h4><strong>专业学历</strong></h4>
                <p>专业：软件技术<br>学历：大学专科</p>
            </div>
            <div class="col-lg-3 col-xs-6 col-md-3">
                <i class="fa fa-rocket"></i>
                <h4><strong>毕业学校</strong></h4>
                <p>毕业学校：四川交通职业技术学院<br>学习技能</p>
            </div>
            <div class="col-lg-3 col-xs-6 col-md-3">
                <i class="fa fa-bullseye"></i>
                <h4><strong>联系方式</strong></h4>
                <p>QQ：851079153<br>邮箱：851079153@qq.con</p>
            </div>
        </div>
    </div>
</div>
<!--工作经验-->
<div id="work">
    <a name="project"></a>
    <div class="container mydiv">
        <div class="text-center center-block">
            <h2>项目经验</h2>
            <p>主要涉及电商、服务平台，包括PC端，手机端，移动APP端等等，主要技术是HTML+CSS+JS，HTML5+CSS3以及框架的使用</p>
        </div>
        <div class="row">
            <div class="col-lg-3 col-xs-6 col-md-3">
                <div class="hover-bg">
                    <a href="page/dianshang.html">
                    <div class="hover-text center-block">
                        <h4>商城</h4>
                        <small>技术：html5+css+js+jQuery</small>
                    </div></a>
                    <img src="images/011.jpg"  class="img-responsive center-block"/>
                </div>

            </div>
            <div class="col-lg-3 col-xs-6 col-md-3">
                <div class="hover-bg">
                    <a href="page/Aboutus.html">
                    <div class="hover-text">
                        <h4>地图地位</h4>
                        <small>技术：利用百度地图API进行二次开发</small>
                    </div></a>
                    <img src="images/022.jpg"  class="img-responsive center-block"/>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6 col-md-3">
                <div class="hover-bg">
                    <a href="page/work.html">
                        <div class="hover-text">
                            <h4>面向对象思想编程</h4>
                            <small>技术：html5+css+js</small>
                        </div>
                    </a>
                    <img src="images/06.jpg"  class="img-responsive center-block"/>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6 col-md-3">
                <div class="hover-bg">
                    <a href="page/shouye.html">
                        <div class="hover-text">
                            <h4>HTML5新增属性的简单应用</h4>
                            <small>技术：html5+css+js+canvas+localsStorage</small>
                        </div>
                    </a>
                    <img src="images/07.jpg"  class="img-responsive center-block"/>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6 col-md-3">
                <div class="hover-bg">
                    <div class="hover-text">
                        <h4>电商</h4>
                        <small>技术：html5+css+js</small>
                    </div>
                    <img src="images/03.jpg"  class="img-responsive center-block"/>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6 col-md-3">
                <div class="hover-bg">
                    <div class="hover-text">
                        <h4>电商</h4>
                        <small>技术：html5+css+js</small>
                    </div>
                    <img src="images/06.jpg"  class="img-responsive center-block"/>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6 col-md-3">
                <div class="hover-bg">
                    <div class="hover-text">
                        <h4>电商</h4>
                        <small>技术：html5+css+js</small>
                    </div>
                    <img src="images/07.jpg"  class="img-responsive center-block"/>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6 col-md-3">
                <div class="hover-bg">
                    <div class="hover-text">
                        <h4>电商</h4>
                        <small>技术：html5+css+js</small>
                    </div>
                    <img src="images/03.jpg"  class="img-responsive center-block"/>
                </div>
            </div>
        </div>
    </div>
</div>
<!--专业技能-->
<div class="skill">
    <a name="skill"></a>
    <div class="container">
        <div class="center-block text-center">
            <h2><strong>专业</strong>技能</h2>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6 col-xs-12">
                <img src="images/about.png"  class="img-responsive center-block" alt=""/>
            </div>
            <div class="col-lg-6 col-md-6 col-xs-12">
                <div class="row">
                    <i class="fa fa-users"></i>
                    <div class="about-text">
                        <h4>PC端</h4>
                        <p>
                            1、熟练掌握div+css网页样式布局与样式,<br>
                            2、熟练掌握JavaScript dom编程以及面向对象思想<br>
                            3、掌握html5新增标签，特性（本地储存，地图定位，canvas等），css3新增样式<br>
                            4、掌握Ajax工作原理，熟练掌握与后端进行单页面数据交互，运用JSON数据进行数据传输<br>
                           </p>
                    </div>
                </div>
                <div class="row">
                    <i class="fa fa-users"></i>
                    <div class="about-text">
                        <h4>PC端</h4>
                        <p>
                            1、熟悉bootstrap，能完成响应式网页开发，对css预编译器less有一定的了解和使用<br>
                            2、熟悉js主流框架jQuery，jQuery官方提供的常用组件<br>
                            3、熟悉jQuery mobile框架，能够完成移动端的网页开发，对zeptojs框架有一定了解<br>
                            4、熟练操作Photoshop以及原型界面工具Axure，能够完成设计效果图<br>
                        </p>
                    </div>
                </div>
                <div class="row">
                    <i class="fa fa-users"></i>
                    <div class="about-text">
                        <h4>PC端</h4>
                        <p>
                             1、熟悉nodejs，以及常用的express框架，实现基本的后台架构体系<br>
                            2、了解angularjs，对同类框架vuejs有一定了解<br>
                            3、熟悉MySQL，SQLserver数据库，熟练使用SQL语法进行基本操作<br>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--人生经历-->
<div class="team text-center">
    <a name="zwpj"></a>
    <div class="container">
        <div class="center-block">
            <h2>人生<strong>经历</strong></h2>
            <p>热爱互联网，热爱技术，专注于前端技术开发和用户体验</p>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-6">
            <img src="images/01%20(1).jpg"  class=" img-circle center-block" alt="浙江理工"/>
           <div class="team-text">
               <h3>四川交通职业技术学院</h3>
               <p>软件技术</p>
               <p>主要学习编程语言，前端技术，网站制作和开发，大学期间做过项目，很喜欢编程</p>
           </div>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-6">
            <img src="images/02%20(1).jpg"  class=" img-circle center-block" alt="浙江理工"/>
            <div class="team-text">
                <h3>四川交通职业技术学院</h3>
                <p>软件技术</p>
                <p>主要学习编程语言，前端技术，网站制作和开发，大学期间做过项目，很喜欢编程</p>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-6">
            <img src="images/03%20(1).jpg"  class=" img-circle center-block" alt="浙江理工"/>
            <div class="team-text">
                <h3>四川交通职业技术学院</h3>
                <p>软件技术</p>
                <p>主要学习编程语言，前端技术，网站制作和开发，大学期间做过项目，很喜欢编程</p>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-6">
            <img src="images/04%20(1).jpg"  class=" img-circle center-block" alt="浙江理工"/>
            <div class="team-text">
                <h3>四川交通职业技术学院</h3>
                <p>软件技术</p>
                <p>主要学习编程语言，前端技术，网站制作和开发，大学期间做过项目，很喜欢编程</p>
            </div>
        </div>
    </div>
</div>
<!--自我评价-->
<div class="text-center" id="pingjia">
    <div class="container">
        <div class="center-block text-center section-title">
            <h2>自我评价</h2>
        </div>
        <div class="row">
            <div class="col-lg-12 col-md-12 col-xs-12">
                <div class="pingjia-text">
                    <div class="item item1 center-block">
                        <p>热爱学习，良好的团队合作精神，能迅速融入新的团队。<br>易和人相处，拥有良好的亲和力。</p>
                    </div>
                    <div class="item item2 center-block">
                        <p>热爱学习，良好的团队合作精神，能迅速融入新的团队</p>
                    </div>
                    <div class="item item3 center-block">
                        <p>热爱学习，良好的团队合作精神，能迅速融入新的团队</p>
                    </div>
                </div>
                <div class="pagination">
                    <div class="btn-circle active"></div>
                </div>
                <div class="pagination">
                    <div class="btn-circle"></div>
                </div>
                <div class="pagination">
                    <div class="btn-circle"></div>
                </div>

            </div>
        </div>
    </div>


</div>

<!--个人展示-->
<div class="personshow">

    <div class="container-fluid">
        <div class="center-block text-center">
            <h2>个人展示</h2>
        </div>
        <div class="jumbotron">
            <div class="carousel slide" id="mycarousel" data-interval="3000" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#mycarousel"  class="active" data-slide-to="0"></li>
                    <li data-target="#mycarousel"  data-slide-to="1"></li>
                    <li data-target="#mycarousel"  data-slide-to="2"></li>
                </ol>

                <div class="carousel-inner center-block" role="listbox">
                    <div class="item active">
                        <img class="img-responsive" src="images/apic125511.jpg" alt="1"/>
                        <div class="carousel-caption">热爱学习，良好的团队合作精神，能迅速融入新的团队
                        </div>
                    </div>
                    <div class="item">
                        <img class="img-responsive" src="images/apic125512.jpg" alt="1"/>
                        <div class="carousel-caption">热爱学习，良好的团队合作精神，能迅速融入新的团队。<br>易和人相处，拥有良好的亲和力。
                        </div>
                    </div>
                    <div class="item">
                        <img class="img-responsive" src="images/apic125513.jpg" alt="1"/>
                        <div class="carousel-caption">热爱学习，良好的团队合作精神，能迅速融入新的团队
                        </div>
                    </div>
                </div>
            </div>

        </div></div>


</div>

<!--联系我们-->
<div class="text-center" id="contact">
   <div class="container">
       <div class="center-block">
           <h2>联系我</h2>
       </div>

       <div class="col-md-8 col-md-offset-2">
           <div class="col-md-4">
               <i class="fa fa-map-marker"></i>
               <p>成都市高新区中和镇</p>
           </div>
           <div class="col-md-4">
               <i class="fa fa-envelope-o"></i>
               <p>851079153@qq.com</p>
           </div>
           <div class="col-md-4">
               <i class="fa fa-phone"></i>
                   <p>Tel:18382477276</p>
           </div>
       </div>
       <div class="col-md-8 col-md-offset-2">
           <h3>给我发邮件</h3>

           <form action="" name="sentMessage" id="contactForm">
               <div class="row">
                   <div class="col-md-6">
                       <div class="form-group">
                           <input type="text" id="name" class="form-control" placeholder="姓名" required="required"/>
                       </div>
                   </div>
                   <div class="col-md-6">
                       <div class="form-group">
                           <input type="text" id="myname" class="form-control" placeholder="姓名" required="required"/>
                       </div>
                   </div>

               <div class="form-group">
                   <textarea name="message" id="message" class="form-control" required="required" rows="4" placeholder="内容"></textarea>
               </div>
               </div>
               <button type="submit" class="btn btn-success">确认发送</button>
           </form>
       </div>

      </div>
   </div>

<!--页脚-->
<nav id="footer">
    <div class="container">
        <div class="pull-left  text-center">
            <p>Copyright © 2016 作者：xxx. 前端工程师</p>
        </div>
        <div class="pull-right">
            <ul class="footer-social">
                <li><i  class="fa fa-qq"></i></li>
                <li><i class="fa fa-weibo"></i></li>
                <li><i class="fa fa-renren"></i></li>
            </ul>
        </div>
    </div>
</nav>
<script src="js/jquery-1.11.3.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script>
    $(document).scroll(function(){
        console.log(this.body.scrollTop);
        if(this.body.scrollTop>100){
            $("#mycollapse").css("background","black").css("transition","all 1s linear");
        }
        else {
            $("#mycollapse").css("background","none").css("transition","all 1s linear");
        }
    })
//    $(".pagination .btn-circle").click(function(){
//        alert(3242);
//        console.log($(".item")[0]);
//        $(".item").css("opacity",1);
//    })
    $(".server .col-lg-3 i").bind({
        "mouseover":function(){
            $(this).css("transform","scale(1.1,1.1)").css({
                "transition":"all 1s linear",
                "cursor":"pointer"
            })

//            alert(23131)
        },
        "mouseout":function(){
            $(this).css("transform","scale(1,1)").css({
                "transition":"all 1s linear",
                "cursor":"pointer"
            })
        }
    })
</script>
</body>
</html>